<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 样式文件 -->
    <link rel="stylesheet" href="./css/underlying.css">
    <link rel="stylesheet" href="./css/structure.css">
    <!-- jquery -->
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <!-- d3 -->
    <script src="./js/d3/d3.min.js"></script>

    <title>员工离职因素可视分析</title>
</head>
<body onload="reaction();" onselectstart="return false;"> <!-- 防止文字被选中 -->
    <div id="top">
        <div id="topleft">
            <div style="width: 35%; float: left; padding-left: 10px; padding-top: 10px;"> 
                    <form>  <!-- 五年内是否有过升职 下拉框
                    变量 promotion 对应等于下方option标签值 -->
                        <label for="ifpromotion" style="font-size: xx-small; color: white;">五年内是否有过升职</label>
                        <select id="ifpromotion" value=-1 onchange="iffactor();">
                            <option value = -1>所有</option>
                            <option value = 1>是</option>
                            <option value = 0>否</option>
                        </select>
                    </form>
            </div>
            <div style="width: 35%;float: left;padding: 10px;">
                <p> <!-- 满意度范围 选择条
                满意度最值分别为 minSatis maxSatis -->
                    <label for="amount1min" style="font-size: small; color: white; width: 30%">满意度范围：</label>
                    <input type="text" id="amount1min" style="border:0; color:#f6931f; font-weight:bold; width: 30px;" value=0>
                    <label for="amount1max" style="font-size: small; color: white; width: 30%"> - </label>
                    <input type="text" id="amount1max" style="border:0; color:#f6931f; font-weight:bold; width: 30px;" value=1>
                </p>
            </div>
            <div style="width: 20%; float: left; padding-top: 15px;">
                <div id="sliderRange1"></div>
            </div>
        </div>
        <div id="topmiddle">
            <h1 text-align="center">员工离职因素可视分析</h1>
        </div>
        <div id="topright">
            <div style="width: 35%;float: left;padding-left: 20px; padding-top: 10px;">
                <p> <!-- 绩效范围 选择条
                绩效最值分别为 minEvalu maxEvalu -->
                    <label for="amount2min" style="font-size: small; color: white; width: 30%">绩效范围：</label>
                    <input type="text" id="amount2min" style="border:0; color:#f6931f; font-weight:bold; width: 30px;" value=0>
                    <label for="amount2max" style="font-size: small; color: white; width: 30%"> - </label>
                    <input type="text" id="amount2max" style="border:0; color:#f6931f; font-weight:bold; width: 30px;" value=1>
                </p>
            </div>
            <div style="width: 20%; float: left; padding-top: 15px;">
                <div id="sliderRange2"></div>
            </div>
            <div style="width: 35%; float: left; padding-top: 10px; padding-left: 30px;">
                <form>  <!-- 是否有过工作过失 下拉框
                变量 waccident 对应等于下方option标签值 -->
                    <label for="ifmistake" style="font-size: xx-small; color: white;">是否有过工作过失</label>
                        <select id="ifmistake" value=-1 onchange="iffactor();">
                            <option value = -1>所有</option>
                            <option value = 1>是</option>
                            <option value = 0>否</option>
                        </select>
                </form>
            </div>
        </div>
    </div>
    <div id="bottom">
        <div id="left">
            <div id="lefttopleft">
                <p style="border-bottom: 2px solid #bbe1f1; font-size: 20px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));">职工工作时长柱状图</p>
               <svg id='barchart-svg'></svg> 
            </div>
            <div id="lefttopright">
                <p style="border-bottom: 2px solid #bbe1f1; font-size: 20px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));">职工离职/未离职比例饼状图</p>
                <label for="ifleft" style="font-size: small; color: white; margin-left: 3px;">是否离职</label>
                <select id="ifleft" value=-1 onchange="ifleft();" style="margin-top: 8px;">
                    <option value = -1>全部</option>
                    <option value = 1>是</option>
                    <option value = 0>否</option>
                </select>
                <div id="tooltip"></div>
                
                <svg id='piechart-svg'></svg>
            </div>
            <div id="leftbottom">
                <p style="border-bottom: 2px solid #bbe1f1; font-size: 20px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));">职工数据平行坐标图</p>
                <svg id="parallelCoordinate" style="width: 100%; height:90%;"></svg>
            </div>
        </div>
        <div id="middle">
            <p style="border-bottom: 2px solid #bbe1f1; font-size: 20px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));">职工数据空间降维散点图</p>
            <input id="clearButton" type="button" value="清除选中" onclick="tableData = [];tableActive();scatter();parCoo();draw_stackedbar();reqHis();draw_barchart();draw_piechart()" style="margin-left: 20px; margin-top: 8px;">
            <svg id="scatterPoints" style="width: 100%; height:90%;"></svg>
        </div>
        <div id="right">
            <div id="righttop">
                <p style="border-bottom: 2px solid #bbe1f1; font-size: 20px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));">职工离职/未离职比例层叠柱状图</p>
                <select id='mode' onchange="judge();" style="margin-top: 4px; margin-left: 2px;">
                    <option value = 1>项目数</option> 
                    <option value = 2>薪资</option>
                </select>
                <svg id='stacked'></svg>
                <div id='tooltip1'></div>
            </div>                                                                                                                                                                                                                  
            <div id="rightbottom">
                <!-- <p style="border-bottom: 2px solid #bbe1f1; font-size: 19.5px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background-color:rgba(10, 212, 226, 0.541) ;">员工月均工作时间频率分布直方图</p> -->
                <p style="border-bottom: 2px solid #bbe1f1; font-size: 19.5px; font-weight: bold; color: whitesmoke; text-align: center; margin-top: 0px; padding-bottom: 2px;background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));;">员工月均工作时间频率分布直方图</p>
                <div id="tooltip2"></div>                                                                                                                                                                       
                <svg id="requency" style="width: 100%; height: 88%"></svg>
                <!-- <label for="clearButton" style="color: #98F5FF; font-weight: bold; margin: 5px;">员工信息表</label>  -->
                <!-- <table id="dataTable" style="width: 700px; color: rgb(0, 245, 184); border:1px solid rgb(214, 15, 15); margin: 1px;" border= 1px></table> -->
            </div>
        </div>
    </div>
</body>
<script src="./js/selectBox.js"></script>
<script src="./js/sliderRange.js"></script>
<script src="./js/toGetFunction.js"></script>
<script src="./js/reaction.js"></script>
<script src="./js/barchart.js"></script>
<script src="./js/scatter.js"></script>
<script src="./js/parallelCoordinate.js"></script>
<script src="./js/piechart.js"></script>
<script src="./js/stacked_barchart.js"></script>
<script src="./js/dataTable.js"></script>
<script src="./js/requencyHistogram.js"></script>
</html>